<template>
   <div class="particulars-wrap">
      <div class="particulars">
        <div class="particulars-left">
          <div class="top-user">
            <div class="left-info">
              <div class="left-header">
                <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d999ae118ba48539c8768a4c721112f~tplv-k3u1fbpfcp-no-mark:100:100:100:100.awebp?" alt="">
                <div class="right-author-date-pageview">
                  <div class="top-author-lv">
                    <h2 class="author">技术光热爱好</h2>
                    <div class="lv">Lv3</div>
                  </div>
                  <div class="bottom-date-pageview">
                    <span>2021年11月22日</span>
                    <span>阅读 3214</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-focus">
              <div>关注</div>
            </div>
          </div>
          <div class="aticleoview" v-html="saveParticulars.acticle.content">
          </div>
        </div>
        <div class="right">右侧</div>
      </div>
    </div>
</template>

<script>
import { getParticulars } from '../../api'
import 'highlight.js/styles/monokai-sublime.css'

export default {
  data: function () {
    return {
      saveParticulars: null
    }
  },
  created () {
    console.log(this.$router.history.current.params.id.split('=')[1])
    getParticulars().then(res => {
      this.saveParticulars = res.data.data
      console.log(this.saveParticulars)
    })
  }
}
</script>

<style lang="less" scoped>
.particulars-wrap {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .particulars {
      width: 1050px;
      border: 1px solid rgba(59, 120, 128, 0.5);
      box-shadow: -1px -1px 6px rgba(59, 120, 128, 0.5);
      margin: 0 auto;
      margin-top: 8px;
      border-radius: 3px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      @media screen and (max-width: 1000px) {
        width: 100%;
      }
      .particulars-left {
        flex: 1 1 auto;
        .top-user{
          height: 70px;
          padding: 5px;
          margin-bottom: 10px;
          display: flex;
          .left-info{
            flex: 1 1 auto;
            .left-header{
              display: flex;
               img{
                 width: 60px;
                 border-radius: 60px;
               }
               .right-author-date-pageview{
                 margin-left: 20px;
                 .top-author-lv{
                   display: flex;
                   .author {
                     font-weight: bold;
                     margin: 3px;
                   }
                   .lv{
                     background: rgb(16, 146, 163);
                     margin: 3px;
                     padding: 0 3px;
                     border-radius: 3px;
                     color: blanchedalmond;
                   }
                 }
                 .bottom-date-pageview{
                   margin-top: 10px;
                   span{
                     margin: 3px;
                   }
                 }
               }
            }
          }
          .right-focus{
            text-align: center;
            width: 80px;
            flex: 0 0 auto;
            display: flex;
            cursor: pointer;
            div{
              border: 1px solid rgb(59, 179, 23);
              color: rgb(59, 179, 23);
              border-radius: 5px;
              height: 32px;
              line-height: 32px;
              width: 60px;
              margin: auto 0;
            }
          }
        }
        .aticleoview{
          padding: 5px 5px 10px;
        }
      }
      .right {
        width: 200px;
        border: 1px solid red;
        flex: 0 0 auto;
        @media screen and (max-width: 750px) {
          display: none;
        }
      }
    }
  }
</style>
